<!--
 @description 调度单详情弹框
 @fileName DispatchDetails.vue
 @author maliang
 @created 2022/03/31 14:41:00
-->
<template>
  <div class="dlg-page">
    <div class="dlg-title">调度单详情</div>
    <div class="core-detail-list">
      <div v-if="subclassList.length" class="tr">
        <div
          v-for="(item, index) in subclassList"
          :key="index"
          class="head-item th"
          @click="resetSortHandle(item)"
        >
          {{ item }}
          <div
            v-if="item === '天数'"
            class="icon-sort"
            :class="isReverse ? 'desc' : 'asc'"
          />
        </div>
      </div>
      <div v-if="dataList.length" class="roll-content">
        <div
          v-for="(item, index) in dataList"
          :key="index"
          class="tr content-row"
        >
          <div class="td">
            {{ item.name }}
          </div>
          <div class="td">
            {{ item.code }}
          </div>
          <div class="td">
            {{ item.datediffDay }}
          </div>
        </div>
      </div>
      <div v-if="dataList.length === 0" class="no-data">
        {{ loadOver ? "暂无数据" : "加载中..." }}
      </div>
    </div>
  </div>
</template>

<script>
import { getUninvitedCarDetail, getLeaveCarDetail } from '@/apis/logistics'
export default {
  name: 'DispatchDetails',
  model: {
    prop: 'showDialog',
    event: 'update'
  },
  props: {
    selectType: {
      type: String,
      default: ''
    },
    showDialog: {
      type: Boolean,
      default: false
    },
    officeName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loadOver: false,
      subclassList: ['办事处', '调度单号', '天数'],
      dataList: [],
      isReverse: true
    }
  },
  watch: {
    showDialog: {
      handler(val) {
        if (val) {
          this.loadOver = false
          this.dataList = []
          this.isReverse = true
          if (this.selectType === 'car') {
            getUninvitedCarDetail({
              name: this.officeName
            }).then((res) => {
              if (res.data && res.data.length) {
                res.data.forEach((item) => {
                  if (item.name) {
                    item.name = item.name
                      .replace('直营办事处', '办')
                      .replace('独资办事处', '办')
                      .replace('销售公司', '')
                  }
                })
                this.dataList = this.sortHandle(
                  res.data,
                  'datediffDay',
                  this.isReverse
                )
              }
              this.loadOver = true
            })
          }
          if (this.selectType === 'ship') {
            getLeaveCarDetail({
              name: this.officeName
            }).then((res) => {
              if (res.data && res.data.length) {
                res.data.forEach((item) => {
                  if (item.name) {
                    item.name = item.name
                      .replace('直营办事处', '办')
                      .replace('独资办事处', '办')
                      .replace('销售公司', '')
                  }
                })
                this.dataList = this.sortHandle(
                  res.data,
                  'datediffDay',
                  this.isReverse
                )
              }
              this.loadOver = true
            })
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    /**
         * list: 需排序的对象数组
         * field: 根据该字段排序
         * isReverse: 是否倒序（true：倒序   false：正序）
         * **/
    sortHandle(list, field, isReverse = false) {
      let newList = JSON.parse(JSON.stringify(list))
      newList = newList.sort((a, b) => {
        if (!isReverse) {
          return a[field] - b[field]
        }
        return b[field] - a[field]
      })
      return newList
    },
    resetSortHandle(code) {
      if (code === '天数') {
        this.isReverse = !this.isReverse
        this.dataList = this.sortHandle(
          this.dataList,
          'datediffDay',
          this.isReverse
        )
      }
    }
  }
}
</script>
<style lang="less" scoped>
.dlg-title {
    // margin-bottom: 10px;
    padding: 10px 0;
    line-height: 22px;
    border-bottom: 1px solid #f4f6f5;
    color: #333;
    font-size: 16px;
    letter-spacing: 1px;
    text-align: center;
    font-family: "PFZH";
}
.dlg-tab {
    width: 100%;
    height: 32px;
    background: #f5f6f7;
    display: flex;
    margin-bottom: 10px;
    .tab-item {
        flex: 1;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        font-family: PFZH;
        color: #888888;
        letter-spacing: 1px;
        text-align: center;
        &.active {
            color: #12b9a3;
            background: #ffffff;
            box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
        }
    }
}
.core-detail-list {
    display: flex;
    flex-direction: column;
    padding: 0 5px;
    font-size: 14px;
    text-align: center;
    padding-bottom: 20px;
    .icon-sort {
        width: 12px;
        height: 14px;
        margin-left: 5px;
        background-image: url("~@/assets/image/icon_sort.png");
        background-size: 12px 14px;
        background-repeat: no-repeat;
        &.asc {
            background-image: url("~@/assets/image/icon_sort_asc.png");
        }
        &.desc {
            background-image: url("~@/assets/image/icon_sort_desc.png");
        }
    }
    .head-item {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 36px;
        border-bottom: 1px solid #eee;
    }
    .content-row {
        display: flex;
        align-items: center;
        border-bottom: 1px dashed #eee;
        padding: 6px 0;
        box-sizing: border-box;
    }
    // min-height: 102px;
    .roll-content {
        max-height: 40vh;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; // 解决ios滚动卡顿
    }
    .tr {
        display: flex;
        align-items: center;
        color: #333333;
        letter-spacing: 1px;
        > .td {
            &:nth-child(1) {
                padding: 0 6px;
                box-sizing: border-box;
            }
            &:nth-child(2) {
                word-break: break-all;
            }
        }
    }
    .th,
    .td {
        width: 45%;
        overflow: hidden;
        &:nth-child(1) {
            width: 30%;
        }
        &:nth-child(3) {
            width: 25%;
        }
    }
    .th {
        font-family: "PFZH";
    }
}
</style>
